{% extends 'base.html' %}
{% block body %}
  <style>

    /* Hiding main menu and it's shadow */

    #header {
      box-shadow: none;
    }

    #header #nav > a {
      display: none !important;
    }

    .title {
      font-size: 24px !important;
      font-weight: 700 !important;
      text-align: center;
      margin: 0 auto 2em auto;
      color: #171819;
      line-height: 150% !important;
    }

    .ui .message .icon {
      opacity: 1.0 !important;
    }

    .ui p {
      font-size: 16px;
      color: #171819;
      margin-bottom: 2em;
    }

    @media only screen and (max-width: 768px) {
      #logo {}

      .item .header {
        font-size: 22px !important;
        margin-left: 25px !important;
      }

      .title {
        font-size: 24px !important;
        margin: -20px auto 1.5em auto;
        line-height: 150% !important;
      }

      .title img {
        width: 75px !important;
      }
    }

  </style>

  <div class="ui" id="welcome" style="max-height: 800px;">
    <div class="title">
      <img src="static/images/opossum_hanging.svg" style="margin-bottom: 15px" width="128px">
      <br>Welcome to Label&nbsp;Studio
    </div>

    <div class="ui" style="max-width: 600px; margin: 0 auto; text-align: center;">
        <p>Import data to start labeling it</p>
        <br>
        <a class="ui button positive" href="/import">Import</a>
    </div>

    <center>
      <div style="margin-top: 6em">
        Made with<img src="static/images/opossum_looking.png" width="60px" style="margin-top: -10px;">
        in California
      </div>
    </center>
  </div>
  <br>

{% endblock %}
